<template>
    <div class='header-wrap'>
        <i @click='fnIcon' class='el-icon-s-operation header-operation'></i>
        <el-breadcrumb class='header-breadcrumb' separator="/">
            <el-breadcrumb-item v-for='(item, index) in arrRoute' :key='index'>{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown class='header-drop'>
            <span class="el-dropdown-link">
                <el-avatar :size="30" :src="circleUrl"></el-avatar>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>

</template>

<script>
    import {ref, watch, reactive, toRefs} from 'vue'
    import { useRoute } from 'vue-router'
	export default {
		name: 'Header',
        setup(props, {emit}){
			let circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
            let flag = ref(false)
            let state = reactive({
              arrRoute: []
            })
            let route = useRoute()

            watch(() => route.path,() => {
                state.arrRoute = []
                let matched = route.matched;
                if(matched.length > 0){
                    for(let i = 0; i < matched.length; i++){
                        state.arrRoute.push(matched[i]['meta']['title'])
                    }
                }
            })

            const fnIcon = () => {
              flag.value = !flag.value
              emit('fnIcon', flag.value)
            }
            return {
				circleUrl,
                flag,
                fnIcon,
                ...toRefs(state)
            }
        }
	}
</script>

<style scoped>
    .title{
        font-weight: bold;
        margin-top: 20px;
        float: left;
    }
</style>
<style>
    .header-wrap{
        width: 100%;
        height: 100%;
        position: relative;
        transition: all linear .4s;
    }
    .header-drop{
        float: right;
        margin-top: 15px;
        margin-right: 20px;
    }
    .header-operation{
        font-size: 20px;
        cursor: pointer;
        margin-left: 0;
        margin-top: 25px;
        float: left;
    }
    .header-breadcrumb{
        width: 300px;
        float: left;
        display: flex;
        align-items: center;
        margin-top: 27px;
        margin-left: 20px;
    }
</style>
